<template>
  <div>
    <uni-list>
      <!-- to 属性携带参数跳转详情页面，当前只为参考 -->
      <uni-list-item
        :border="true"
        class="uni-list-item--waterfall"
        title="自定义商品列表"
        v-for="item in data"
        :key="item.id"
      >
        <!-- 通过header插槽定义列表左侧图片 -->
        <template v-slot:header>
          <view class="uni-thumb shop-picture">
            <image
              style="width:100%;height:100%;"
              src="../../static/cat.jpeg"
              mode="aspectFill"
            ></image>
          </view>
        </template>
        <!-- 通过body插槽定义商品布局 -->
        <view slot="body" class="shop">
          <view>
            <view class="uni-title">
              <text class="uni-ellipsis-2">{{ item.name }}</text>
            </view>
            <view>
              <text class="uni-tag hot-tag">{{ item.typeName }}</text>
            </view>
          </view>
          <view>
            <view class="shop-price">
              <view>
                <text>¥</text>
                <text class="shop-price-text">{{ item.singlePrice }}</text>
                <text>.00</text>
              </view>
              <view class="uni-note"
                ><text class="uni-ellipsis-1">{{
                  item.description
                }}</text></view
              >
            </view>
            <view class="uni-note ellipsis">
              <view class="uni-note"> 库存: {{ item.storageNum }}</view>
              <view
                ><u-button
                  @click="buyGoods(item.id)"
                  size="mini"
                  shape="circle"
                  type="warning"
                  >立即购买</u-button
                ></view
              >
            </view>
          </view>
        </view>
      </uni-list-item>
    </uni-list>
    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog
        title="完善收货信息"
        :duration="2000"
        :before-close="true"
        @close="close"
        @confirm="confirm"
      >
        <u-form
          :model="form"
          ref="uForm"
          :error-type="errorType"
          label-width="160rpx"
          label-align="right"
        >
          <u-form-item prop="account" label="用户："
            ><u-input v-model="form.account" :clearable="false"
          /></u-form-item>
          <u-form-item prop="userName" label="收货人："
            ><u-input v-model="form.userName" :clearable="false"
          /></u-form-item>
          <u-form-item prop="address" label="收货地址："
            ><u-input v-model="form.address" :clearable="false"
          /></u-form-item>
          <u-form-item prop="userPhone" label="手机号："
            ><u-input v-model="form.userPhone" :clearable="false"
          /></u-form-item>
        </u-form>
      </uni-popup-dialog>
    </uni-popup>
    <u-toast ref="uToast" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      errorType: ['toast'],
      data: [],
      form:{
        userPhone:"",
        userName:"",
        address:"",
        account:"",
        details:[
        {
          commodityId:1,
          buyNum: 1
        }]
      },
      rules: {
        userName: [
          {
            required: true,
            message: "收货人不能为空",
            trigger: "blur"
          }
        ],
        address: [
          {
            required: true,
            message: "收货地址不能为空",
            trigger: "blur"
          }
        ],
        userPhone: [
          {
            required: true,
            message: "手机号不能为空",
            trigger: "blur"
          }
        ],
        account: [
          {
            required: true,
            message: "用户不能为空",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    initFn() {
      let token = this.$store.state.token
      console.log(token);
      uni.request({
        url: "http://39.106.224.223:8088/sellpart/commodity/query",
        header: {
          "content-type": "application/json",
          Authorization: token
        },
        method: "GET",
        success: res => {
          console.log(res);
          if (res.data.code == 200) {
            this.data = res.data.data;
          }
        }
      });
    },
    confirm(value) {
      this.$refs.uForm.setRules(this.rules);
      this.$refs['uForm'].validate(valid => {
        if (valid) {
          let that = this;
          let token = this.$store.state.token
          uni.request({
            url: 'http://39.106.224.223:8088/sellpart/order/generate',
            header:{
              'content-type':'application/json',
              'Authorization':token
            },
            data:this.form,
            method:'POST',
            success:res=>{
              if (res.data.code == 200) {
                this.$refs.popup.close();
                this.$refs.uToast.show({
                  title: "下单成功",
                  type: "success"
                });
              }
            },
            fail:function(err) {
              console.log(err);
            }
          })
        }
      })
    },
    close() {
      this.$refs.popup.close();
    },
    buyGoods(id) {
      this.$refs.popup.open();
      this.form.details[0].commodityId = id
    }
  },
  onShow() {
    this.initFn();
  }
};
</script>
<style lang="scss">
@import "./uni-ui.scss";
.tips {
  color: #67c23a;
  font-size: 14px;
  line-height: 40px;
  text-align: center;
  background-color: #f0f9eb;
  height: 0;
  opacity: 0;
  transform: translateY(-100%);
  transition: all 0.3s;
}

.tips-ani {
  transform: translateY(0);
  height: 40px;
  opacity: 1;
}

.shop {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.shop-picture {
  width: 110px;
  height: 110px;
}

.shop-picture-column {
  width: 100%;
  height: 170px;
  margin-bottom: 10px;
}

.shop-price {
  margin-top: 5px;
  font-size: 12px;
  color: #ff5a5f;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.shop-price-text {
  font-size: 16px;
}

.hot-tag {
  background: #ff5a5f;
  border: none;
  color: #fff;
}

.button-box {
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  background: #007aff;
  color: #fff;
}

.uni-link {
  flex-shrink: 0;
}

.ellipsis {
  display: flex;
  overflow: hidden;
  justify-content: space-between;
}

.uni-ellipsis-1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.uni-ellipsis-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>